
<template>
	<div class="tmpl">
		<!-- 使用subimgslider.vue组件实现轮播 -->
		<subimgslider :imagelist='list'></subimgslider>
		<!-- 使用mui中的9宫格实现导航按钮 -->
		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to='/news/newslist'>	
						<span class="mui-icon mui-icon-home"></span>
						<div class="mui-media-body">新闻资讯</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to='/photo/photolist'>
						<span class="mui-icon mui-icon-navigate"></span>
						<div class="mui-media-body">图片分享</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon mui-icon-gear"></span>
						<div class="mui-media-body">商品购买</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">                         
					<a href="#">
						<span class="mui-icon mui-icon-paperplane"></span>
						<div class="mui-media-body">留言反馈</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon mui-icon-info"></span>
						<div class="mui-media-body">视频专区</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="mui-icon mui-icon-help"></span>
						<div class="mui-media-body">联系我们</div>
					</a>
				</li>
			</ul>
	</div>

	</div>
</template>

<script>
	// 1.0 导入subimgslider.vue组件
	import subimgslider from '../subcomp/subimgslider.vue';
	import common from '../../kits/common.js';
	export default {
		data(){
			return {
/*				list: [{
					url: 'http://www.itcast.cn/subject/phoneweb/index.html',
					img: 'http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg'
				}, {
					url: 'http://www.itcast.cn/subject/phoneweb/index.html',
					img: 'http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg'
				}]*/
				list:[]
			}
		},
		created(){
			this.getlunbo();// 当home.vue组件创建完毕以后，调用数据请求
		},
		methods:{
			getlunbo(){
				// this.list = 'http://localhost:8899/api/getlunbo';
				var url = common.apihost + '/api/getlunbo' ;
				this.list = 'http://vuecms.ittun.com/api/getlunbo';
				this.$http.get(this.list).then(res=>{
						//成功则将res.body.message中的数据赋值给this.list属性即可
						this.list = res.body.message;
					},res=>{
						console.log('轮播图获取失败')
					})
			},
		},
		components:{
			 subimgslider
		}
	}

</script>

<!-- scoped的作用：表示下面的样式只在本组件中有效，如果不写就是全局样式了 -->
<style scoped>
  /* 定义9宫格的图片样式  */
  .mui-icon-home{
  	background: url(../../../statics/images/menu10.png) round;
  	height: 40px;
  	width: 40px;
  }
   .mui-icon-navigate{
  	background: url(../../../statics/images/menu3.png) round;
  	height: 40px;
  	width: 40px;
  }
   .mui-icon-gear{
  	background: url(../../../statics/images/menu4.png) round;
  	height: 40px;
  	width: 40px;
  }
   .mui-icon-paperplane{
  	background: url(../../../statics/images/menu5.png) round;
  	height: 40px;
  	width: 40px;
  }
   .mui-icon-info{
  	background: url(../../../statics/images/menu6.png) round;
  	height: 40px;
  	width: 40px;
  }
   .mui-icon-help{
  	background: url(../../../statics/images/menu9.png) round;
  	height: 40px;
  	width: 40px;
  }
  .mui-icon-home:before {
  	content: '';
  }
    .mui-icon-navigate:before {
  	content: '';
  }
  .mui-icon-gear:before {
  	content: '';
  }
  .mui-icon-paperplane:before {
  	content: '';
  }
  .mui-icon-info:before {
  	content: '';
  }
  .mui-icon-help:before {
  	content: '';
  }
				    

  .mui-grid-view.mui-grid-9 {
  	 background: #fff;
  	 border: none;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
  	  border: none;
  }

</style>